<template>
  <div>
    <el-col :span="12">
      <el-form-item :label="$t('注册地-省')" :prop="propSF">
        <el-select v-model="bussData.provinceRegistered" :clearable="true" :placeholder="$t('注册地-省')" filterable @change="provinceChanged()">
          <el-option
            v-for="area in provinceOptions"
            :key="area.id"
            :label="$t(area.name)"
            :value="area.id"
          />
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item :label="$t('注册地-市')" :prop="propCity">
        <el-select v-model="bussData.cityRegistered" :clearable="true" :placeholder="$t('注册地-市')" filterable @change="cityChanged()">
          <el-option
            v-for="city in cityOptions"
            :key="city.id"
            :label="$t(city.name)"
            :value="city.id"
          />
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item :label="$t('注册地-区')" :prop="propDistrict">
        <el-select v-model="bussData.districtRegistered" :clearable="true" :placeholder="$t('注册地-区')" filterable @change="$forceUpdate()">
          <el-option
            v-for="district in districtOptions"
            :key="district.id"
            :label="$t(district.name)"
            :value="district.id"
          />
        </el-select>
      </el-form-item>
    </el-col>
  </div>
</template>
<script>
  import { allProvinceList, cityListByProvinceId } from '@/api/system/area/sysArea'
  export default {
    name: 'Area',
    props: {
      // form
      bussData: {
        type: Object,
        required: true
      },
      // 省
      propSF: {
        type: String,
        default: () => 'provinceRegistered'
      },
      // 市
      propCity: {
        type: String,
        default: () => 'cityRegistered'
      },
      // 区
      propDistrict: {
        type: String,
        default: () => 'districtRegistered'
      }
    },
    data: () => {
      return {
        // 省
        provinceOptions: [],
        // 市
        cityOptions: [],
        // 区
        districtOptions: []
      }
    },
    created() {
      // 获取所有的省集合
      allProvinceList().then(response => {
        this.provinceOptions = response.data
        this.initCity()
        // this.initDistrict()
      })
    },
    methods: {
      provinceChanged() {
        cityListByProvinceId(this.bussData.provinceRegistered).then(res => {
          this.bussData.cityRegistered = ''
          this.bussData.districtRegistered = ''
          this.districtOptions = []
          this.cityOptions = res.data
        })
      },
      cityChanged() {
        cityListByProvinceId(this.bussData.cityRegistered).then(res => {
          this.bussData.districtRegistered = ''
          this.districtOptions = res.data
        })
      },
      initCity() {
        if (this.bussData.provinceRegistered !== null && this.bussData.provinceRegistered !== '') {
          cityListByProvinceId(this.bussData.provinceRegistered).then(res => {
            this.cityOptions = res.data
            this.initDistrict()
          })
        }
      },
      initDistrict() {
        if (this.bussData.cityRegistered !== null && this.bussData.cityRegistered !== '') {
          cityListByProvinceId(this.bussData.cityRegistered).then(res => {
            this.districtOptions = res.data
          })
        }
      },
      // 表单重置
      reset() {
        this.cityOptions = []
        this.districtOptions = []
      }
    }
  }
</script>
